<template>
  <div class="fns-upload-component">
    <el-form-item :label="uploadData.label">
      <div v-if="uploadData.listType === 'picture-card'">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="action"
          :headers="{token: tokenImg}"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          :on-success="upFileSuccess"
          :on-error="upFileError"
          :file-list="uploadData.fileList"
          :limit="uploadData.limit"
          :list-type="uploadData.listType">
          <el-button size="small" type="primary">上传附件</el-button>
        </el-upload>
        <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
        <el-dialog
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          append-to-body>
          <div class="imgBox">
            <img width="100%" :src="dialogImageUrl" alt="">
          </div>
        </el-dialog>
      </div>

      <div v-if="uploadData.listType === 'picture'">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="action"
          :headers="{token: tokenImg}"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          :on-success="upFileSuccess"
          :on-error="upFileError"
          :file-list="uploadData.fileList"
          :limit="uploadData.limit"
          :show-file-list="showFile"
          :on-change="uploadChange"
          :on-exceed="uploadExceed"
          :list-type="uploadData.listType">
          <el-button size="small" type="primary">上传附件</el-button>
          <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
        </el-upload>
      </div>
    </el-form-item>
  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import { mapState } from 'vuex'
  export default {
    props: {
      uploadData: {
        listType: {
          default: 'picture-card'
        },
        limit: {
          default: 1
        },
        fileList: {
          default: [{}]
        }
      }
    },
    computed: {
      ...mapState({
        imgUrl: state => state.userInfo.url,
        tokenImg: state => state.user.token
      })
    },
    watch: {
    },
    data() {
      return {
        fileList: [
          { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4286086355,2603217620&fm=27&gp=0.jpg' }
        ],
        showFile: true,
        action: '/amdms/api/file/upload/',
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      // 上传图片
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
        console.log(file)
      },
      upFileSuccess(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          this.showFile = true
        } else {
          var index = +this.fileList.length - 1
          fileList[index] = {}
          this.$refs['upload1'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      upFileError(err, file, fileList) {
        var index = +this.fileList.length - 1
        fileList[index] = {}
        if (err) {
          Message({
            message: '图片上传失败',
            type: 'error',
            showClose: true
          })
        }
      },
      beforeUpload(file) {
        this.showFile = true
        if (!/(jpg|png|jpeg|gif)$/.test(file.name)) {
          Message({
            message: '图片格式不正确',
            type: 'warning',
            showClose: true
          })
          return false
        }
        if (file.size / 1024 > 5120) {
          Message({
            message: '文件超过5M,请调整后重新上传',
            type: 'warning',
            showClose: true
          })
          return false
        }
      },
      uploadChange(file, fileList) {
      },
      uploadExceed(file, fileList) {
        Message({
          message: '请删除文件，重新上传',
          type: 'warning',
          showClose: true
        })
        return false
      }
    }
  }
</script>

<style lang="scss">
  /*upload*/
  .fns-upload-component {
    .imgBox {
      width: 100%;
      border: 1px solid #ebebeb;
      text-align: center;
      padding: 10px;
      border-radius: 5px;
      max-height: 500px;
      overflow-y: auto;
      img {
        width: 100%;
      }
    }
  }
</style>
